$superHeadingFontSize: 25px;
$superHeadingLineHeight: 24px;

$headingFontSize: 19px;
$headingLineHeight: 21px;

$textFontSize: 16px;
$textLineHeight: 21px;

$plainTextFontSize: 13px;
$plainTextLineHeight: 17px;

$buttonFontSize: 14px;
$buttonLineHeight: 18px;

$supersmallTextFontSize: 10px;
$supersmallTextLineHeight: 13px;

$mainBgColor: #dee1ea;
$themeColor: #393747;
$colorRedBright: #ef5072;
$accentColorBright: #e1e4ed;
$accentColorDark: #7d808a;
$colorGreenBright: #66bb6a;
$colorBlueBright: #56b6ff;
$colorYellowBright: #e08600;

$mainFontWeight: 400;
$mainFontSpacing: 0.04em;
$mainFontScale: 1;

$globalBorderRadius: 2px;

$modalDialogBg: rgba(160, 165, 180, 0.8);

$darkModeGameBackground: #535866;
$darkModeControlsBackground: darken($darkModeGameBackground, 5);

@mixin DebugText($color) {
  // font-size: 3px;
  // &,
  // *{
  //   color: $color !important;
  // }
}

@mixin Text{
  @include ScaleFont($textFontSize, $textLineHeight);
  font-weight: $mainFontWeight;
  letter-spacing: $mainFontSpacing;
  @include DebugText(blue);
}

@mixin SuperSmallText{
  @include ScaleFont($supersmallTextFontSize, $supersmallTextLineHeight);
  font-weight: $mainFontWeight;
  letter-spacing: $mainFontSpacing;
  @include DebugText(green);
}

@mixin Heading {
  @include ScaleFont($headingFontSize, $headingLineHeight);
  font-weight: $mainFontWeight;
  letter-spacing: $mainFontSpacing;

  @include DebugText(yellow);
}

@mixin SuperHeading {
  @include ScaleFont($superHeadingFontSize, $superHeadingLineHeight);
  font-weight: $mainFontWeight;
  letter-spacing: $mainFontSpacing;
  @include DebugText(orange);
}

@mixin PlainText{
  @include ScaleFont($plainTextFontSize, $plainTextLineHeight);
  font-weight: $mainFontWeight;
  letter-spacing: $mainFontSpacing;
  @include DebugText(red)
}

@mixin ButtonText{
  @include ScaleFont($buttonFontSize, $buttonLineHeight);
  font-weight: $mainFontWeight;
  letter-spacing: $mainFontSpacing;
  @include DebugText(purple)
}